<template>
  <view class="cc-loading" :style="{ flexDirection: vertical ? 'column' : 'row' }">
    <view
      class="cc-loading"
      :class="[`${className}`]"
      :style="{
        width: size + 'px',
        height: size + 'px',
        borderLeftColor: type === 'circle' && color ? color : '#c7c7c7'
      }"
    ></view>
    <view :style="{ color: textColor, fontSize: textSize + 'px' }" :class="{ 'cc-loading-icon-left': !vertical, 'cc-loading-icon-top': vertical }"><slot></slot></view>
  </view>
</template>

<script>
export default {
  name: 'cc-loading',
  components: {},
  props: {
    type: {
      type: String,
      default: 'circle'
    },
    // 自定义颜色
    color: {
      type: String,
      default: '#c8c9cc'
    },
    // 尺寸大小
    size: {
      type: String,
      default: '22'
    },
    // 文字大小
    textSize: {
      type: String,
      default: '14'
    },
    // 文字颜色
    textColor: {
      type: String,
      default: '#c9c9c9'
    },
    // 是否垂直排列图标和文字内容
    vertical: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {}
  },
  methods: {},
  mounted() {},
  onLoad() {},
  onShow() {},
  filters: {},
  computed: {
    className() {
      if (this.type) return `cc-loading-icon-${this.type}`
      else return ''
    }
  },
  watch: {}
}
</script>

<style lang="scss">
.cc-loading {
  display: flex;
  &-icon {
    &-circle {
      animation: loading 1s linear infinite;
      width: 11px;
      height: 11px;
      border-radius: 50%;
      border: 2px solid;
      border-color: #e4e4e4;
    }
    &-spinner {
      animation: loading 1s linear infinite;
      background: transparent
        url()
        no-repeat;
      background-size: 100%;
    }
    &-left {
      margin-left: 16rpx;
      display: flex;
      align-items: center;
    }
    &-top {
      margin-top: 16rpx;
    }
  }
}
@keyframes loading {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(1turn);
  }
}
</style>
